<template>
	<a-modal
		v-model:open="visible"
		:centered="true"
		fullscreen
		:footer="null"
		wrap-class-name="full-modal"
		width="100%"
		destroy-on-close
		@cancel="onCancel"
	>
		<div class="video-modal">
			<div class="carousel-wrap">
				<global-spin :spinning="spinning">
					<div class="carousel-item">
						<video id="fullScreenVideo" class="video" autoplay muted></video>
						<img :src="'xx'" class="image" @error.once="(e: Event) => ((e.currentTarget as HTMLImageElement).src = '')" />
					</div>
				</global-spin>
				<div class="video-location">
					<div class="location-locationName">{{ videoData.areaLinkName }}</div>

					<div class="location-deviceName">{{ videoData.name }}</div>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<script setup lang="ts" name="VideoModal">
import { TsAlarmCenterListProps } from '../../type';
import { videoPlay } from '@/global-utils/viedeo.utils';

const visible = ref(false);

const videoData = ref<TsAlarmCenterListProps>({} as TsAlarmCenterListProps);

const spinning = ref<any>();

const play = ref<any>();
const onCancel = (): void => {
	visible.value = false;
	play.value && play.value.close();
};

const openModal = (data: TsAlarmCenterListProps): void => {
	nextTick(() => {
		spinning.value = 0;
		videoData.value = data;
		visible.value = true;
		videoPlay({ videoDomId: 'fullScreenVideo', videoUrl: data.webrtc }, (player: any, videoStatus: number) => {
			spinning.value = videoStatus;
			if (!play.value) {
				play.value = player;
			}
		});
	});
};

const closeModal = (callback: any): void => {
	visible.value = false;
	callback && callback();
};
defineExpose({
	openModal,
	closeModal
});
</script>

<style lang="less" scoped>
.video-modal {
	display: flex;
	height: 100%;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.carousel-wrap {
	position: relative;
	display: flex;
	// width: 100%;
	margin-top: 20px;
	align-items: center;
	justify-content: center;
	gap: 0 8px;

	.g-video-spin {
		overflow: hidden;
		width: 100%;
		height: 803px;
		border-radius: 4px;
		background: @secondary01;

		img {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}

		video {
			width: 100%;
			height: 100%;
			object-fit: contain;
		}
	}

	.carousel-item {
		display: flex;
		width: 100%;
		height: 803px;
		justify-content: center;
		align-items: center;

		video {
			// width: 100%;
			height: 100%;
			object-fit: contain;
		}

		.image {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}

	.video-location {
		position: absolute;
		bottom: 4px;
		left: 8px;
		z-index: 9;
		font-size: 12px;
		font-weight: 400;
		line-height: 20px;
		color: white;
		text-shadow: 0 0 1.5px rgba(37, 37, 45, 0.8);

		.location-locationName {
			max-width: 202px;
		}

		.location-deviceName {
			max-width: 130px;
		}
	}

	.video-empty {
		display: flex;
		width: 100%;
		height: 100%;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;

		.empty-image {
			position: relative;
			width: 112px;
			height: 84px;
			object-fit: cover;

			& > img {
				width: 112px;
				height: 84px;
				object-fit: cover;
			}

			.empty-description {
				position: absolute;
				bottom: -30px;
				left: 30px;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				text-align: center;
				color: rgba(255, 255, 255, 0.6);
			}
		}
	}

	.video-aiDevice {
		position: absolute;
		right: 8px;
		bottom: 8px;
		z-index: 1;
		width: 48px;
		height: 17px;
		border: 1px solid rgba(255, 255, 255, 0.8);
		border-radius: 6px;
		line-height: 13px;
		text-align: center;
		color: #0d4cca;
		background: rgba(151, 188, 247, 0.8);
		box-shadow: @shadowS;
		cursor: pointer;
		// .ellipsis();

		&:hover {
			background: #97bcf7;
			box-shadow: @shadowM;
		}

		.title-type-text {
			margin-right: 4px;
			font-size: 12px;
			font-weight: 700;
		}

		.title-type-number {
			font-size: 12px;
			font-weight: 700;
			color: white;
		}
	}
}

//所有控件
video::-webkit-media-controls-enclosure {
	width: 100%;
}
</style>
